<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            opacity: 0.5;
            background-color: cyan !important;
        }

        div::after {
            content: "";
            display: block;
            width: 50px;
            height: 50px;
            background-color: #f40;
        }
    </style>
</head>
<body>
    <div style="margin-right:0;margin-top:0;margin-bottom:0;margin-left:0;float:left;width:100px;height:100px;background-color:#008c8c;padding:0;">
        <nav></nav>
    </div>

    <!-- <script type="text/javascript">

        var div = document.getElementsByTagName('div')[0];

        console.log(div.style); //返回一个类数组，包含这个div所有的css内联样式
        // 只有设置的才有值，其他的都是空字符串
        // 可读可写，读写都是改变的内联样式表
        console.log(div.style.width);
        div.style.width = '50%';
        // 本质是操作的HTML元素，通过修改style属性进而更改CSS
        // 对象里面的值不是绝对的值
        div.style.backgroundColor = '#2299ff';
        // js里面不可以使用连字符，用小驼峰式代替
        div.style.borderRadius = '50%';
        // 50% 和 50px 是不一样的
    
        console.log(div.style.opacity);// 返回空字符串
        // div.style 展示的只是行间/内联样式表(计算之后的内联样式)
        console.log(div.style.float);
        div.style.cssFloat = 'right';
        
        // 复合属性可以直接写
        div.style.border = '1px solid #666';
        div.style.paddingLeft = "10px";
    </script> -->

    <script>

        //除了 .style ,没有别的方法可以写入值了，剩下的都只可以查


        // 查询计算样式//
        //1. 
        var div = document.getElementsByTagName('div')[0];  
        console.log(window.getComputedStyle(div, null));
        // 返回当前元素所展示的一切CSS属性的值

        console.log(window.getComputedStyle(div, null).backgroundColor);
        console.log(window.getComputedStyle(div, null).opacity);
        console.log(div.style.backgroundColor);//获取行间样式
        // 计算后的值都是绝对单位，px, rgb().....


        //2.
        // div.currentStyle   返回计算样式的类数组，针对IE8及以下
        // console.log(div.currentStyle.width); //会报错，谷歌不兼容



        // 封装实用性兼容性方法，获取元素样式，CSS属性值
        function getStyle(elem, prop) {
            if(window.getComputedStyle) {
                return window.getComputedStyle(elem, null)[prop];
            }else{
                return elem.currentStyle[prop];
            }
        }


        // 扩展，获取div里面的伪元素的style表
        console.log(window.getComputedStyle(div, 'after'));

    </script>


</body>
</html>